import React, { Component } from 'react';  
//布局相关的组件 
import {
    Layout, Menu, Breadcrumb, Icon,
  } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
//路由相关的组件
import { Route, Link, Switch } from "react-router-dom" 

import MovieList from './MovieList.jsx'
import MovieDetail from './MovieDetail.jsx'

class MovieContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( <Layout style={{height:'100%'}}>
            <Sider width={200} style={{ background: '#fff' }}>
              <Menu
                mode="inline"
                defaultSelectedKeys={[window.location.hash.split('/')[2]]}
                style={{ height: '100%', borderRight: 0 }}
              >
                <Menu.Item key="is_theaters">
                    <Link to="/movie/in_theaters/1">正在热映</Link>
                </Menu.Item>
                <Menu.Item key="comming_soon">
                    <Link to="/movie/comming_soon/1">即将上映</Link>
                </Menu.Item>
                <Menu.Item key="top250">
                    <Link to="/movie/top250/1">top250</Link>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout style={{ paddingLeft: '1px' }}>
              <Content style={{
                background: '#fff', padding: 10, margin: 0, minHeight: 280,
              }}
              >
              {/* 在匹配路由规则的时候, 这里提供了两个参数 */}
              {/* 如果想要从 路由规则中,提取 参数,需要使用 this.props.mathch.params */}
              {/**  精确匹配,也会从上到下,把所有的路由匹配一遍*/}
              <Switch>
                  {/**使用这个,组件,能够指定,如果前面的路由规则优先匹配到了,则放弃后续的路由  */}
                <Route path="/movie/detail/:id" component={MovieDetail}></Route>
                <Route path="/movie/:type/:page" component={MovieList}></Route>
               </Switch>
              </Content>
            </Layout>
          </Layout>);
    }
}
 
export default MovieContainer;